<template>
	<view class="share_avatars">
		<uni-search-bar @confirm="search" @cancel="cancelSearchHandle"></uni-search-bar>
		<view class="share_avatars_content" v-if="shareAvatars.data.length>0">
			<view class="item" v-for="(avatar, index) in shareAvatars.data">
				<navigator :url="'../user/info?id=' + avatar.userId">
					<custom-avatar :item="{ ...avatar, type: 'normal' }"></custom-avatar>
					<view class="text">
						{{ avatar.nickName }}
						<view class="desc">{{ avatar.desc }}</view>
					</view>
				</navigator>
				<view class="handle"><custom-forward-button :item="{ newsId: avatar.newsId, userId: avatar.userId }"></custom-forward-button></view>
			</view>
		</view>
		<view class="no_data" v-if="shareAvatars.data.length<=0">暂无数据</view>
		<custom-gotop v-show="isShowGoTop"></custom-gotop>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowGoTop:false,
			shareAvatars: {
				data: []
			},
			loading: false,
			pn: 0,
			newsId: ''
		};
	},
	onLoad(ops) {
		this.newsId = ops.id;
		this.getShareAvatarsData(this.newsId);
	},
	onPullDownRefresh() {
		this.getShareAvatarsData(this.newsId).finally(() => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		let that = this;
		if (!this.loading) {
			this.loading = true;
			this.getShareAvatarsData(this.newsId, this.pn + 1).finally(() => {
				that.pn += 1;
				that.loading = false;
			});
		}
	},
	onPageScroll(v) {
		if (v.scrollTop >= 200) {
			this.isShowGoTop = true;
		} else {
			this.isShowGoTop = false;
		}
	},
	methods: {
		cancelSearchHandle(){
			uni.startPullDownRefresh({})
		},
		search(v){
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('searchFollowerAvatars', {
						k: v.value
					})
					.then(res => {
						that.shareAvatars.data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getShareAvatarsData(id, pn, v) {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getFollowerAvatarsData', {
						pn:pn || 0
					})
					.then(res => {
						that.shareAvatars.data = pn>0 ? that.shareAvatars.data.concat(res.data) : res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		}
	}
};
</script>

<style lang="less">
.share_avatars {
	.share_avatars_tip {
		padding: 20rpx;
		font-size: 28rpx;
		color: #999999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 99999;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
	}
	.share_avatars_content {
		margin: 0 20rpx 0 20rpx;
		.item {
			padding: 40rpx 20rpx;
			display: flex;
			align-items: center;
			navigator {
				flex: 1;
				display: flex;
				align-items: center;
				.text {
					font-size: 28rpx;
					margin: 0 0 0 10rpx;
					flex: 1;
					.desc {
						display: block;
						color: #999999;
					}
				}
			}
			.handle {
			}
		}
	}
	.no_data{
		padding:20rpx;
		display:flex;
		justify-content: center;
		align-items: center;
		font-size:28rpx;
		color:#999999;
	}
}
</style>
